<template>
  <div class="tool-box-item-div">
    <template v-for="(action, actionIndex) in actions">
      <!-- <el-tooltip
        :content="action.title"
        :placement="placement"
        :key="actionIndex"
        :enterable="false"
      >-->
      <div :key="actionIndex" class="icon-item" @click="() => onAction(action.path)">
        <i v-if="action.icon" :class="`fa fa-${action.icon}`" />
        <i v-if="action.iconEle" :class="`el-icon-${action.iconEle}`" />
        <svg-icon v-if="action.iconSvg" :icon-class="action.iconSvg" />
        <span>{{ action.title }}</span>
      </div>
      <!-- </el-tooltip> -->
    </template>
  </div>
</template>

<script>
import ActionDispatcher from '@/views/editor/actions/dispatcher'

export default {
  components: {},
  mixins: [ActionDispatcher],
  props: {
    placement: {
      type: String,
      required: false,
      default: 'right-start'
    },
    actions: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
// @import '../style/variable.scss';
.tool-box-item-div {
  padding: 5px 5px;
  overflow: hidden;
  // background-color: black;
  .icon-item {
    margin: 5px 3px 10px;
    height: 40px;
    text-align: center;
    width: 44px;
    float: left;
    cursor: pointer;

    span {
      display: block;
      font-size: 11px;
      height: 11px;
      line-height: 11px;
      margin: 5px auto 0;
    }

    .disabled {
      pointer-events: none;
    }
    // 放大图标
    i,
    svg {
      width: 24px !important;
      height: 24px !important;
      font-size: 1em !important;
      margin: 0 auto;
    }
  }
}
</style>
